.national-chart {
  .national-range-change {
    .ant-drawer-wrapper-body {
      display: flex;
      flex-direction: column;
      .ant-drawer-header {
        flex-basis: 66px;
      }
      .ant-drawer-body {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .range-slider {
          margin-left: 30%;
        }
        .value-change {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 15px;
          border-left: 4px solid #f5f5f5;
          margin-left: 30%;
          li {
            position: relative;
            margin-left: 15px;
            cursor: pointer;
            &::before {
              content: "";
              position: absolute;
              display: block;
              width: 8px;
              height: 8px;
              top: 50%;
              transform: translate(-50%, -50%);
              left: -17px;
              background-color: #fff;
              border: 2px solid rgb(232, 232, 232);
              border-radius: 50%;
            }
            &.active {
              &::before {
                width: 14px;
                height: 14px;
                border-color: #8cc8ff;
              }
            }
          }
        }
      }
    }
  }
}
